JavaScriptを使用すると、ホームページの背景色を変化させることができるようになります。そこで今回は背景色を変化させる小技を２つ紹介してみることにしましょう。ひとつはクリックすると背景色が変更できるページ、もうひとつはページを表示する際に自動的に背景色を変化させるページです。

→
 
JavaScriptでは、「document.bgColor」プロパティの値を変化させることにより背景色を変更することができます。
この値はHTMLによる背景色の指定と同様にRGBの16進数で指定するようにしてください。また、マウスがクリックされたときにJavaScriptを実行させるようにするには、「onClick」というイベントを使用します。これら2つを組み合わせると、ボタンや画像がクリックされた際にページの背景色を変更できるようになります。
▼ フォームボタンを背景色の変更に使用する場合
<form>
<input type="button" value="赤" onClick="document.bgColor='#FF0000'">
<input type="button" value="青" onClick="document.bgColor='#0000FF'">
<input type="button" value="緑" onClick="document.bgColor='#00FF00'">
</form>

▼ 画像を背景色の変更に使用する場合
<img src="red.gif" onClick="document.bgColor='#FF0000'">
<img src="blue.gif" onClick="document.bgColor='#0000FF'">
<img src="green.gif" onClick="document.bgColor='#00FF00'">


→
 
次は「document.bgColor」プロパティの応用編ということで、ページが表示される際に、背景色が次々と変化するJavaScriptを紹介しましょう。
ページが表示される際にJavaScriptを実行させるには、「onload」というイベントをBODYタグに追加します。また、JavaScriptには背景色を次々と変化させるコマンドが用意されていないため、「onload」イベントでは自作のJavaScript関数を呼び出すようにします。

<body bgcolor="#000000" text="#FFFFFF" onload="bgchange()">



→
 
「onload」イベントにより呼び出される関数は、HTMLのソース内に自分で記述しておく必要があります。
繰り返しの命令文「for」を上手に活用して、「document.bgColor」プロパティが繰り返し実行される関数を作成してください。ここでは、背景が白から黒に変化する関数を例として紹介しておきましょう。
<script language="JavaScript">
<!--
function bgchange(){
  for(i=255 ; i>0 ; i=i-1){
    document.bgColor=i*256*256+i*256+i;
    }
}
//-->
</script>


なお、このJavaScript関数はHEADタグ内に記述するようにします。作成した関数について簡単に解説を加えておくと、以下のようになります。
  • functionでbgchange()という名の関数を定義します
  • 繰り返し命令forでiが255から0になるまで合計256回、document.bgColorを繰り返します
  • document.bgColorの値は、iの値により変化するよう10進数で指定します。最初の「i*256*256」が赤(R)を、次の「i*256」が緑(G)を、最後の「i」が青(B)を表していると考えれば、背景色が白から黒に変化していく様子が想像できると思います。

    以上で、背景色が次々と変化するページの作成は完了です。ページ内の文字を最初の背景色と同じにしておくと、文字がだんだんと浮かび上がってくるように見せることもできるはずです。いろいろと工夫してみてください。
    		•

    PC�p�����y�����l���g�����������}�W�������������z �����������O�~�y�������������z Yahoo �y�V NTT-X Store

    �����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q���� ���������[�� �C�O���s�����������I �C�O�z�e��